<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-if="showSearch"
    >
      <el-form-item label="设备编码" prop="machineNo">
        <el-input
          v-model.trim="queryParams.machineNo"
          style="width: 200px"
          placeholder="请输入设备编码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="machineName">
        <el-input
          v-model.trim="queryParams.machineName"
          style="width: 200px"
          placeholder="请输入设备名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车间名称" prop="workshopId">
        <el-select
          v-model="queryParams.workshopId"
          style="width: 200px"
          placeholder="请选择车间名称"
        >
          <el-option
            v-for="item in workShopList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="queryParams.type"
          style="width: 200px"
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in ems_machine_info_type"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="Upload" @click="handleImport">导入</el-button>
            </el-col> -->
      <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      border
      :data="onlineList"
    >
      <el-table-column
        label="序号"
        width="60"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="columns[0].visible"
        label="状态"
        align="center"
        prop="status"
        width="80"
        :show-overflow-tooltip="true"
      >
        <template v-slot="{ row }">
          <el-tag :type="row.status == 1 ? 'danger' : ''" effect="dark">
            {{ row.status == 1 ? "停用" : "启用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[1].visible"
        label="设备编码"
        align="center"
        prop="machineNo"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template v-slot="{ row }">
          <el-button type="primary" @click="handleView(row)" link>
            {{ row.machineNo }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[2].visible"
        label="设备名称"
        align="center"
        prop="machineName"
        min-width="150"
      />
      <el-table-column
        v-if="columns[3].visible"
        label="车间编码"
        align="center"
        prop="workshopNo"
        min-width="150"
      />
      <el-table-column
        v-if="columns[4].visible"
        label="车间名称"
        align="center"
        prop="workshopName"
        min-width="120"
      />
      <el-table-column
        v-if="columns[5].visible"
        label="版材尺寸"
        align="center"
        prop="size"
        min-width="100"
      >
        <template v-slot="{ row }">
          <dict-tag :options="ems_machine_info_size" :value="row.size" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[5].visible"
        label="是否分配内文生产单"
        align="center"
        prop="isFpnw"
        min-width="100"
      >
        <template v-slot="{ row }">
          <el-switch
            v-model="row.isFpnw"
            active-color="#ff4949"
            @change="changeSwitch($event, row)"
            inactive-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
          >
            <!-- active-text="否"
            inactive-text="是" -->
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[6].visible"
        label="损耗比例(%)"
        align="center"
        prop="wasteRate"
        width="100"
      >
        <template v-slot="{ row }">
          <dict-tag
            :options="ems_machine_info_waste_rate"
            :value="row.wasteRate"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[7].visible"
        label="机型"
        align="center"
        prop="model"
        width="100"
        :show-overflow-tooltip="true"
      >
        <template v-slot="{ row }">
          <dict-tag :options="ems_machine_info_model" :value="row.model" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[8].visible"
        label="产能(令/时、吨/时)"
        align="center"
        min-width="100"
        prop="capacity"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="columns[9].visible"
        label="类型"
        align="center"
        prop="type"
        width="100"
      >
        <template v-slot="{ row }">
          <dict-tag :options="ems_machine_info_type" :value="row.type" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns[10].visible"
        label="负责人"
        align="center"
        prop="headUserName"
        min-width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="columns[11].visible"
        label="负责人电话"
        align="center"
        prop="headUserPhone"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        width="150"
        fixed="right"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            v-if="scope.row.status == 1"
            @click="handleEdit(scope.row)"
          ></el-button>
          <el-button
            link
            type="primary"
            icon="Delete"
            v-if="scope.row.status == 1"
            @click="handleDel(scope.row)"
          ></el-button>
          <el-button
            link
            type="primary"
            icon="TurnOff"
            @click="handleService(scope.row)"
          >
            {{ scope.row.status == 1 ? "启用" : "停用" }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Workbench">
import { downLoad } from "@/utils/ruoyi";
import { ElMessage, ElMessageBox } from "element-plus";
import useTagsViewStore from "@/store/modules/tagsView";
const tagsViewStore = useTagsViewStore();
import {
  getList as getDataList,
  exportList,
  upIsFpnw,
  deleteById,
  addList,
  updatestatus,
} from "@/api/basicInfo/workbench";
import { getMesWorkShop } from "@/api/basicInfo/workshop";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const onlineList = ref([]);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const {
  ems_machine_info_size,
  ems_machine_info_waste_rate,
  ems_machine_info_model,
  ems_machine_info_type,
} = proxy.useDict(
  "ems_machine_info_size",
  "ems_machine_info_waste_rate",
  "ems_machine_info_model",
  "ems_machine_info_type"
);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  machineNo: undefined,
  machineName: undefined,
  type: undefined,
  workshopName: undefined,
});

// 列显隐信息
const columns = ref([
  { key: 0, label: `状态`, visible: true },
  { key: 1, label: `设备编码`, visible: true },
  { key: 2, label: `设备名称`, visible: true },
  { key: 3, label: `车间编码`, visible: true },
  { key: 4, label: `车间名称`, visible: true },
  { key: 5, label: `版材尺寸`, visible: true },
  { key: 6, label: `损耗比例(%)`, visible: true },
  { key: 7, label: `机型`, visible: true },
  { key: 8, label: `产能(令/时、吨/时)`, visible: true },
  { key: 9, label: `类型`, visible: true },
  { key: 10, label: `负责人`, visible: true },
  { key: 11, label: `负责人电话`, visible: true },
]);
const workShopList = ref([]);
const getWorkShop = () => {
  getMesWorkShop({}).then((res) => {
    workShopList.value = res.rows;
  });
};
if (route.query?.code) {
  queryParams.value.machineNo = route.query.code;
  getDataList(queryParams.value).then((res) => {
    if (res.rows.length > 0) {
      handleView(res.rows[0]);
      tagsViewStore.delView(route);
    }
  });
} else {
  getList();
}
const changeSwitch = (event, row) => {
  upIsFpnw({
    pid: row.pid,
    isFpnw: row.isFpnw,
  }).then((res) => {
    if (res.code == 200) {
      getList();
      proxy.$modal.msgSuccess("修改成功");
    }
  });
};
// 新增
const handleAdd = () => {
  router.push("/basicInfo/workbench/details");
};
//编辑
const handleEdit = (row) => {
  router.push({
    path: "/basicInfo/workbench/details",
    query: {
      id: row.pid,
    },
  });
};
// 查看
const handleView = (row) => {
  router.push({
    path: "/basicInfo/workbench/details",
    query: {
      id: row.pid,
      info: true,
    },
  });
};
//删除
const handleDel = (row) => {
  proxy.$modal
    .confirm('是否确认删除"' + row.machineName + '"的数据项？')
    .then(function () {
      return deleteById({ pid: row.pid });
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};
//停用启用
const handleService = (row) => {
  const state = row.status == 1 ? "2" : "1";
  const stateText = row.status == 1 ? "启用" : "停用";
  ElMessageBox.confirm(
    `确定要${stateText}名称为「${row.machineName}」的车间信息吗?`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    updatestatus({ pid: row.pid, status: state }).then((response) => {
      if (response.code === 200) {
        ElMessage({
          message: `${stateText}成功`,
          type: "success",
        });
        getList();
      }
    });
  });
};

function getList() {
  loading.value = true;
  getDataList(queryParams.value)
    .then((response) => {
      onlineList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 导出
const handleExport = () => {
  exportList(queryParams.value).then((res) => {
    downLoad(res.msg, "机台列表");
  });
};
getWorkShop();
</script>
